<template>
	<el-row style="margin: 10px;">
		<!-- 导航栏 -->
		<div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i>{{workflowInfo.typeName}}</el-breadcrumb-item>
                <el-breadcrumb-item>{{workflowInfo.workflowName}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

		<el-button type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出excel</el-button>
		<el-row>
			<!-- 工具栏 -->
			<el-form :inline="true" v-model="search" label-width="180px" class="preview-tool-form">
				<li v-for="item in toolComponents" :is="item.component" :reset="reset" :toolInfo="item.toolInfo" v-on:message="getSearchValue" ></li>
				<el-row style="text-align:center;margin-bottom:0px;">
					<el-form-item>
						<el-button type="primary" size="small" @click="searchMessage">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="info" size="small" @click="resetForm()">重置</el-button>
					</el-form-item>
					<el-form-item>
						<el-popover ref="popover" placement="top-start" trigger="hover">
							<el-col :span="10" >
								<el-tooltip :content="'个人流程查看: ' + private" placement="top">
								  <el-switch v-model="private" active-color="#13ce66" inactive-color="#ff4949" active-value="true" inactive-value="false"></el-switch>
	  							</el-tooltip>
	  						</el-col>
	  						<el-col :span="10" :offset="4">
							  	<el-tooltip :content="'归档查看: ' + archived" placement="top">
								  <el-switch v-model="archived" active-color="#13ce66" inactive-color="#ff4949" active-value="true" inactive-value="false"></el-switch>
								</el-tooltip>
							</el-col>
						</el-popover>
						<i class="el-icon-more" style="color: #EB9E05;" v-popover:popover></i>
					</el-form-item>
				</el-row>
			</el-form>
			<!-- 工具栏 End-->
		</el-row>
		
		<el-row>
			<!-- 报表预览列表 -->
			<el-table :data="tableData" border highlight-current-row size="mini" :stripe="true" v-loading="dataloading">
				<el-table-column type="index" min-width="40" align="center" ></el-table-column>
				<el-table-column v-for="item in fieldHeader" :min-width="item.width" :prop="item.fieldName" :label="item.label" :align="item.align" :sortable="item.sortable" fieldHeader="true"></el-table-column>
			</el-table>
			<!-- 报表预览列表 End-->

			<!-- 报表配置列表-分页 -->
			<div class="pagination">
	            <el-pagination
                    @current-change="handlePageChange"
                    @size-change="handleSizeChange"
                    :page-sizes="[10, 20, 50, 100, 1000]"
                    :page-size="pagination.pagesize"
                    :current-page="pagination.page"
                    layout="total, sizes, prev, pager, next"
                    :total="pagination.total">
	            </el-pagination>
	        </div>
	        <!--报表配置列表-分页 End -->
		</el-row>
	</el-row>
</template>

<script>
	/* 表单组件 */
	import formInput from './form/input.vue'
	import formNumber from './form/number.vue'
	import formSelect from './form/select.vue'
	import formDatepicker from './form/datepicker.vue'
	import draggable from 'vuedraggable'

	export default {
		name: '',
		props: ['reportId'],
		data(){
			return {
				// 数据下载加载状态
				downloadLoading: false,
				// 数据加载状态
				dataloading: false,
				// 表单重置状态
				reset: false,
				// 报表基本信息
				workflowInfo: {},

				// 表单查询数据
				search: {},

				// 归档显示状态
				archived: false,
				// 个人流程查看状态
				private: false,

				// 工具栏空间
				toolComponents: [],

				// 表格表头数据
				fieldHeader: [],
				// 表格数据
				tableData: [],
				// 表格-分页数据
				pagination: {
					// 分页大小
					pagesize: 10,
					// 当前页
					page: 1,
					// 所有页总数
					total: 1,
				},
			}
		},
		components: {
			'rule-input': formInput,
			'rule-number': formNumber,
			'rule-select': formSelect,
			'rule-datepicker': formDatepicker,
		},
		mounted: function(){
			this.init();
		},
		methods: {
			// 初始化页面数据
			init: function(){
				this.dataloading = true;
				// 获取报表基本信息数据
				this.$http.post('/api/report/workflow/info', {reportId: this.reportId}, {emulateJSON: true}).then(response => {
					this.fieldHeader.splice(0, this.fieldHeader.length);
					this.workflowInfo = response.data;
				}, response => {
					console.log('Ajax can not get the data from the server!!!');
				});
				// 获取表头数据
				this.$http.post('/api/report/field', {reportId: this.reportId}, {emulateJSON: true}).then(response => {
					this.fieldHeader.splice(0, this.fieldHeader.length);
					response.data.filter(obj => {
						if (obj.display){
							this.fieldHeader.push(obj);
						}
					});
				}, response => {
					console.log('Ajax can not get the data from the server!!!');
				});
				// 获取表格规则数据
				this.$http.post('/api/report/tool', {reportId: this.reportId}, {emulateJSON: true}).then(response => {
					this.toolComponents.splice(0, this.toolComponents.length);
					response.data.forEach(element => {
						if (!element.deletedType){
							this.addComponents(element.type, element);
						}
					});
				}, response => {
					console.log('Ajax can not get the data from the server!!!');
				});
				// 获取表格数据
				this.$http.post('/api/report/table', {reportId: this.reportId, search: this.search, archived: this.archived, private: this.private, page: this.pagination.page, rows: this.pagination.pagesize}).then(response => {
					this.dataloading = false;

					this.tableData = response.data.rows;
					this.pagination.total = response.data.total;
				}, response => {
					this.dataloading = false;
					console.log('Ajax can not get the data from the server!!!');
				});
			},
			// 表单查询
			searchMessage: function(){
				this.dataloading = true;
				this.$http.post('/api/report/table', {reportId: this.reportId, search: this.search, archived: this.archived, private: this.private, page: this.pagination.page, rows: this.pagination.pagesize}).then(response => {
					this.dataloading = false;

					this.tableData = response.data.rows;
					this.pagination.total = response.data.total;
				}, response => {
					this.dataloading = false;
					console.log('Ajax can not get the data from the server!!!');
				});
			},
			// 表单工具栏状态重置
			resetForm: function(){
				this.reset = !this.reset;
			},
			// 动态添加组件
			addComponents: function(component, toolInfo){
				this.toolComponents.push({
					'component' : component,
					'toolInfo': toolInfo
				});
			},
			// 获得子组件的表单控件输入值
			getSearchValue: function(prop, type, value){
				this.search[prop] = {type: type, value: value}

				console.log(this.search, prop, type, value);
			},

			/* 表格分页 */
			// 改变页码
			handlePageChange: function(currentPage){
				this.dataloading = true;
				this.$http.post('/api/report/table', {reportId: this.reportId, search: this.search, archived: this.archived, private: this.private, page: currentPage, rows: this.pagination.pagesize}).then(response => {	
					this.dataloading = false;

					this.tableData = response.data.rows;
					this.pagination.total = response.data.total;
				}, response => {
					this.dataloading = false;
					console.log('Ajax can not get the data from the server!!!');
				});
			},
			// 改变页面大小
			handleSizeChange: function(size){
				this.pagination.pagesize = size;
				this.handlePageChange(this.pagination.page);
			},
			/* 表格分页 End */
			
			// 导出excel文件
			handleDownload: function(){
				this.downloadLoading = true;
				require.ensure([], () => {
					const { export_json_to_excel } = require('../vendor/Export2Excel');
					this.$http.post('/api/report/table', {reportId: this.reportId, search: this.search, archived: this.archived, private: this.private, page: -1, rows: -1}).then(response => {	

						const tHeader = [];
						const filterVal = [];
						this.fieldHeader.filter( obj => {
							if (obj.display){
								tHeader.push(obj.label);
								filterVal.push(obj.fieldName);
							}
						});
						const name = this.workflowInfo.workflowName;
						const list = response.data.rows;
						const data = this.formatJSON(filterVal, list);
						export_json_to_excel(tHeader, data, name);
						this.downloadLoading = false;

					}, response => {
						this.dataloading = false;
						console.log('Ajax can not get the data from the server!!!');
					});

					
				});
			},
			// 格式化JSON
			formatJSON: function(filterVal, jsonData){
				return jsonData.map(v => filterVal.map(j => {
					if (j === 'timestamp'){
						return parseTime(v[j]);
					} else {
						return v[j];
					}
				}));
			}
		},
		watch: {
			'reportId': function(value){
				this.init();
			}
		}
	}
</script>

<style>
	.el-popover{
		min-width: 0px !important;
	}
</style>